<template>
  <div class="form-designer">
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="component-panel">
          <h4>组件库</h4>
          <div class="component-list">
            <div
              v-for="component in components"
              :key="component.type"
              class="component-item"
              @click="addComponent(component)"
            >
              <i :class="component.icon"></i>
              <span>{{ component.label }}</span>
            </div>
          </div>
        </div>
      </el-col>
      
      <el-col :span="16">
        <div class="form-preview">
          <h4>表单预览</h4>
          <div class="form-content">
            <draggable v-model="formFields" :options="{animation: 200}">
              <div
                v-for="(field, index) in formFields"
                :key="index"
                class="form-field"
                @click="selectField(index)"
              >
                <div class="field-label">{{ field.label }}</div>
                <el-input v-if="field.type === 'input'" :placeholder="field.placeholder" />
                <el-input v-if="field.type === 'textarea'" type="textarea" :placeholder="field.placeholder" />
                <el-input-number v-if="field.type === 'number'" />
                <el-date-picker v-if="field.type === 'date'" type="date" />
                <el-select v-if="field.type === 'select'" :placeholder="field.placeholder">
                  <el-option
                    v-for="option in field.options"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value"
                  />
                </el-select>
                <div class="field-actions">
                  <i class="el-icon-delete" @click.stop="removeField(index)"></i>
                </div>
              </div>
            </draggable>
            <div v-if="formFields.length === 0" class="empty-tip">
              从左侧拖拽或点击组件到这里
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  name: 'FormDesigner',
  
  components: {
    draggable
  },
  
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  
  data() {
    return {
      components: [
        { type: 'input', label: '单行文本', icon: 'el-icon-edit' },
        { type: 'textarea', label: '多行文本', icon: 'el-icon-document' },
        { type: 'number', label: '数字', icon: 'el-icon-s-data' },
        { type: 'date', label: '日期', icon: 'el-icon-date' },
        { type: 'select', label: '下拉选择', icon: 'el-icon-arrow-down' }
      ],
      formFields: [],
      selectedIndex: -1
    }
  },
  
  watch: {
    value: {
      immediate: true,
      handler(val) {
        if (val) {
          try {
            const config = JSON.parse(val)
            this.formFields = config.fields || []
          } catch (e) {
            console.error('解析表单配置失败', e)
          }
        }
      }
    },
    formFields: {
      deep: true,
      handler(val) {
        this.$emit('input', JSON.stringify({ fields: val }))
      }
    }
  },
  
  methods: {
    addComponent(component) {
      const field = {
        type: component.type,
        label: component.label,
        name: 'field_' + Date.now(),
        placeholder: '请输入' + component.label,
        required: false
      }
      
      if (component.type === 'select') {
        field.options = [
          { label: '选项1', value: '1' },
          { label: '选项2', value: '2' }
        ]
      }
      
      this.formFields.push(field)
    },
    
    removeField(index) {
      this.formFields.splice(index, 1)
    },
    
    selectField(index) {
      this.selectedIndex = index
    }
  }
}
</script>

<style scoped>
.form-designer {
  padding: 20px;
  min-height: 400px;
}

.component-panel {
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  padding: 10px;
  min-height: 400px;
}

.component-panel h4 {
  margin-bottom: 15px;
  color: #303133;
}

.component-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.component-item {
  padding: 12px;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.component-item:hover {
  border-color: #409EFF;
  background-color: #ecf5ff;
}

.form-preview {
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  padding: 10px;
  min-height: 400px;
}

.form-preview h4 {
  margin-bottom: 15px;
  color: #303133;
}

.form-content {
  min-height: 350px;
}

.form-field {
  padding: 15px;
  border: 1px dashed #DCDFE6;
  border-radius: 4px;
  margin-bottom: 10px;
  position: relative;
  cursor: move;
}

.form-field:hover {
  border-color: #409EFF;
  background-color: #f5f7fa;
}

.field-label {
  margin-bottom: 8px;
  color: #606266;
  font-weight: 500;
}

.field-actions {
  position: absolute;
  top: 5px;
  right: 5px;
}

.field-actions i {
  cursor: pointer;
  color: #F56C6C;
  font-size: 16px;
}

.empty-tip {
  text-align: center;
  color: #909399;
  padding: 50px 0;
}
</style>

